<script setup>
import { queryUserPage } from '@/api/user'
import { onMounted, ref } from 'vue'

//定义表单参数
const queryForm = ref({
    page: 1,
    pageSize: 5,
    total: 0,
    pages: 1,
    t: {
        name: '',
        gender: ''
    }
})

//定义数据列表
const userList = ref([])

//定义查询方法，实现分页查询
const queryUsers = async () => {
    //远程调用
    let result = await queryUserPage(queryForm.value)
    //列表数据赋值
    userList.value = result.data
    //分页数据赋值
    queryForm.value.total = result.total
    queryForm.value.pages = result.pages
}

const handleSizeChange = (val) => {
    //每页条数发生变化
    queryForm.value.pageSize = val
    queryForm.value.page = 1
    queryUsers()
}
const handleCurrentChange = (val) => {
    //当前页发生变化
    queryForm.value.page = val
    queryUsers()
}

//初始化
onMounted(() => {
    queryUsers()
})
</script>
<template>

    <div class="aaa">
        <!-- 表单 -->
        <el-form :inline="true" :model="queryForm">
            <el-form-item label="用户名">
                <el-input v-model="queryForm.t.name" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="queryForm.t.gender" placeholder="请选择性别" style="width: 200px;">
                    <el-option label="男" value="1" />
                    <el-option label="女" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryUsers">查询</el-button>
                <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="userList" border>
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="gender" label="gender">
                <template #default="scope">
                    {{ scope.row.gender === 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="createTime" width="250" />
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


</template>
<style scoped></style>